<template>
    <ContentBase>
        <div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)">
          <div class="card-body">
            <div class="row">
              <div class="col-1 img-field">
                <img class="img-fluid" :src="user.photo" alt="">
              </div>
              <div class="col-11">
                <div class="username">{{ user.username }}</div>
                <div class="follower-count">受关注数:{{ user.followercount }}</div>
              </div>
            </div>
          </div>
        </div>
    </ContentBase>
  </template>
  
  <script>
  import ContentBase from '../components/ContentField'
  import $ from 'jquery';
  import { ref } from 'vue';
  import router from '@/router/index';
  import { useStore } from 'vuex';

  export default {
    name: 'UserList',
    components: {
        ContentBase,
    },
    setup() {
      const store = useStore();
      let users = ref([]);

        $.ajax({
            url: 'http://127.0.0.1:3000/myspace/userlist/',
            type: "get",
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                users.value = resp;

            }
        });


      const open_user_profile = userId => {
          router.push({
            name: "userprofile",
            params: {
              userId
            }
          })
        };

      return {
        users,
        open_user_profile
      };
    }
  }
  </script>
  
  <style scoped>
  img {
    border-radius: 50%;
  }
  
  .username {
    font-weight: bold;
    height: 50%;
  }
  
  .follower-count {
    font-size: 12px;
    color: gray;
    height: 50%;
  }
  
  .card {
    margin-bottom: 20px;
    cursor: pointer;
  }
  
  .card:hover {
    box-shadow: 2px 2px 10px lightgrey;
    transition: 500ms;
  }
  
  .img-field {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  </style>
  